<template>
  <div>
    <el-card class="box-construction" shadow="always">
      <div class="box-title box-title-position">
        <div>我的项目</div>
        <el-button class="add-btn" size="medium" type="primary" @click="addProject()">我要立项</el-button>
      </div>
      <el-table
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="tableData"
        border
        style="width: 100%;margin-top:25px"
      >
        <el-table-column :show-overflow-tooltip="true" prop="code" label="项目编号" width="200"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="name" label="项目名称" width="200"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="classic" label="项目类别" width="130"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="level" label="优先级别" width="130"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="proManager" label="项目经理" width="130"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="currentStage" label="当前阶段" width="130"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="curMonthPlan" label="当月计划" width="200"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="currentState" label="当前状态" width="130"></el-table-column>
        <el-table-column prop="version" label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-view" @click="documentEdit(scope.row,true)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="box-page"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="sizes, prev, pager, next"
        :total="pagination.total"
      ></el-pagination>
    </el-card>
    <EditForm
      :datas.sync="editRow"
      :shows.sync="visible"
      :baseStyle="baseStyle"
      :saveForm="submit"
    />
  </div>
</template>

<script>
import EditForm from "../editForm/editForm";
export default {
  data() {
    return {
      tableData: [
        {
          id: "001",
          code: "XXXZX-001",
          name: "信息中心项目管理系统01",
          classic: "软件系统类",
          level: "C",
          proManager: "小刘勇",
          technical: "小刘勇",
          devTest: "小刘勇，TTT",
          planOvertime: "2020-07-09",
          currentStage: "立项",
          currentStageNum: "1",
          currentState: "异常",
          description: "asfdsfzxsdhgfds",
          stageList: [
            { name: "立项", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "启动", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "规划", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "设计", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "构建", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "测试", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "上线", startTime: "2020-04-30", endTime: "2020-05-09" }
          ],
          curMonthPlan: "",
          monthPlanList: [
            { time: "2020年1月", plan: "框架搭建完成" },
            { time: "2020年2月", plan: "框架搭建完成" },
            { time: "2020年3月", plan: "框架搭建完成" },
            { time: "2020年4月", plan: "框架搭建完成" }
          ],
          mettingItems: [
            {
              mettingTime: "2020年5月30日",
              itemsThins: [
                { name: "事项 1", things: "修复bug10个", check: true },
                {
                  name: "事项 2",
                  things: "设计数据库确定接口字段",
                  check: false
                },
                { name: "事项 3", things: "修复bug30个", check: true }
              ]
            }
          ]
        },
        {
          id: "002",
          code: "XXXZX-002",
          name: "信息中心项目管理系统02",
          classic: "软件系统类",
          level: "C",
          proManager: "小刘勇",
          technical: "小刘勇",
          devTest: "小刘勇，TTT",
          planOvertime: "2020-07-09",
          currentStage: "立项",
          currentStageNum: "1",
          currentState: "异常",
          description: "asfdsfzxsdhgfds",
          stageList: [
            { name: "立项", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "启动", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "规划", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "设计", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "构建", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "测试", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "上线", startTime: "2020-04-30", endTime: "2020-05-09" }
          ],
          curMonthPlan: "框架搭建完成",
          monthPlanList: [
            { time: "2020年1月", plan: "框架搭建完成" },
            { time: "2020年2月", plan: "框架搭建完成" },
            { time: "2020年3月", plan: "框架搭建完成" },
            { time: "2020年4月", plan: "框架搭建完成" }
          ],
          mettingItems: [
            {
              mettingTime: "2020年5月30日",
              itemsThins: [
                { name: "事项 1", things: "修复bug10个", check: true },
                {
                  name: "事项 2",
                  things: "设计数据库确定接口字段",
                  check: false
                },
                { name: "事项 3", things: "修复bug30个", check: true }
              ]
            }
          ]
        },
        {
          id: "003",
          code: "XXXZX-003",
          name: "信息中心项目管理系统03",
          classic: "软件系统类",
          level: "C",
          proManager: "小刘勇",
          technical: "小刘勇",
          devTest: "小刘勇，TTT",
          planOvertime: "2020-07-09",
          currentStage: "立项",
          currentStageNum: "1",
          currentState: "异常",
          description: "asfdsfzxsdhgfds",
          stageList: [
            { name: "立项", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "启动", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "规划", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "设计", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "构建", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "测试", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "上线", startTime: "2020-04-30", endTime: "2020-05-09" }
          ],
          curMonthPlan: "框架搭建完成",
          monthPlanList: [
            { time: "2020年1月", plan: "框架搭建完成" },
            { time: "2020年2月", plan: "框架搭建完成" },
            { time: "2020年3月", plan: "框架搭建完成" },
            { time: "2020年4月", plan: "框架搭建完成" }
          ],
          mettingItems: [
            {
              mettingTime: "2020年5月30日",
              itemsThins: [
                { name: "事项 1", things: "修复bug10个", check: true },
                {
                  name: "事项 2",
                  things: "设计数据库确定接口字段",
                  check: false
                },
                { name: "事项 3", things: "修复bug30个", check: true }
              ]
            }
          ]
        },
        {
          id: "004",
          code: "XXXZX-004",
          name: "信息中心项目管理系统04",
          classic: "软件系统类",
          level: "C",
          proManager: "小刘勇",
          technical: "小刘勇",
          devTest: "小刘勇，TTT",
          planOvertime: "2020-07-09",
          currentStage: "立项",
          currentStageNum: "1",
          currentState: "异常",
          description: "asfdsfzxsdhgfds",
          stageList: [
            { name: "立项", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "启动", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "规划", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "设计", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "构建", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "测试", startTime: "2020-04-30", endTime: "2020-05-09" },
            { name: "上线", startTime: "2020-04-30", endTime: "2020-05-09" }
          ],
          curMonthPlan: "框架搭建完成",
          monthPlanList: [
            { time: "2020年1月", plan: "框架搭建完成" },
            { time: "2020年2月", plan: "框架搭建完成" },
            { time: "2020年3月", plan: "框架搭建完成" },
            { time: "2020年4月", plan: "框架搭建完成" }
          ],
          mettingItems: [
            {
              mettingTime: "2020年5月30日",
              itemsThins: [
                { name: "事项 1", things: "修复bug10个", check: true },
                {
                  name: "事项 2",
                  things: "设计数据库确定接口字段",
                  check: false
                },
                { name: "事项 3", things: "修复bug30个", check: true }
              ]
            }
          ]
        }
      ],
      pagination: {
        currentPage: 1,
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      editRow: {},
      visible: false,
      baseStyle: {
        width: "140px"
      }
    };
  },
  components: {
    EditForm
  },
  created() {},
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    addProject(){
      
    },
    documentEdit(row, isShow) {
      this.editRow = { ...row };
      this.visible = true;
      // console.log(row, "row");
    },
    submit(val) {
      console.log(val, "formVal");
    }
  }
};
</script>

<style lang="scss" scoped>
.box-title-position {
  position: relative;
  .add-btn {
    position: absolute;
    right: 0;
    top: -3px;
  }
}
.box-construction {
  min-height: 100px;
  .box-page {
    text-align: right;
    padding-top: 40px;
  }
}
</style>